<script lang="ts" setup>
import { useAppStore } from "@/pinia/stores/app"
import { usePermissionStore } from "@/pinia/stores/permission"
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue"
import { isEmpty } from "lodash"

const appStore = useAppStore()
const isCollapse = computed(() => !appStore.sidebar.opened)
const permissionStore = usePermissionStore()

/** 切换侧边栏 */
function toggleSidebar() {
  appStore.toggleSidebar(false)
}

const isChild = computed<boolean>(() => {
  return !isEmpty(permissionStore.childFlag)
})
</script>

<template>
  <div v-if="isChild" class="humburger" :class="{ 'is-collapse': isCollapse }">
    <el-button :icon="isCollapse ? ArrowRight : ArrowLeft" circle @click="toggleSidebar" />
  </div>
</template>

<style lang="scss" scoped>
.humburger {
  --v3-tagsview-height: 34px;
  position: absolute;
  top: calc(var(--v3-navigationbar-height) + var(--v3-tagsview-height) + var(--v3-header-border-bottom-width));
  left: calc(var(--v3-sidebar-width) - 12px);
  z-index: 9999;
  transition-duration: 0.3s;
  &.is-collapse {
    left: calc(var(--v3-sidebar-hide-width) - 12px);
  }
}
</style>
